<template>
  <el-switch
    v-model="sysTheme"
    :width="45"
    inline-prompt
    active-icon="Sunny"
    inactive-icon="Moon"
    active-color="#409EFF"
    inactive-color="#000"
    @change="configTheme"
  />
</template>

<script lang="ts">
import { defineComponent, ref } from 'vue'
import sysCache from '@/utils/cache'

export default defineComponent({
  name: 'AppDarkModeToggle',
  setup() {
    const sysTheme = ref((sysCache.localCache.getCache('APP_THEME') || 'default') === 'default')

    // 切换系统主题
    function configTheme(val) {
      let theme = val ? 'default' : 'dark'
      document.documentElement.setAttribute('data-theme', theme)
      sysCache.localCache.setCache('APP_THEME', theme)
    }

    return {
      sysTheme,
      configTheme
    }
  }
})
</script>
